<!DOCTYPE html>
<html lang="en" style="height: 100%">
<head>
    <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>


<script type="text/javascript" src="https://registry.npmmirror.com/echarts/5.4.3/files/dist/echarts.min.js"></script>

<script type="text/javascript">
    var dom = document.getElementById('container');
    var myChart = echarts.init(dom, null, {
        renderer: 'canvas',
        useDirtyRect: false
    });
    var app = {};

    var option;

    option = {
        title: {
            text: 'Spring Bean Dependencies'
        },
        tooltip: {
            show: true,
            formatter: function (params) {
                return params.data.des;
            }
        },
        series: [
            {
                type: 'graph', // 图表类型为关系图
                layout: 'force', // 力导向布局
                roam: true,
                symbolSize: 100,
                label: {
                    show: true
                },
                edgeSymbol: ['arrow'],
                lineStyle: {
                    curveness: 0.1
                },
                force: {
                    repulsion: 1000, // 节点之间的推荐力
                    edgeLength: 100 // 边的长度
                },
                categories: ["default","Service","Mapper"],
                data: [{"draggable":true,"symbolSize":34.64101615137754,"name":"dummyService1","category":1},{"draggable":true,"symbolSize":20.0,"name":"dummyService2","category":1},{"draggable":true,"symbolSize":28.284271247461902,"name":"dummyService3","category":1},{"draggable":true,"symbolSize":20.0,"name":"dummyService4","category":1},{"draggable":true,"symbolSize":20.0,"name":"dummyService5","category":1},{"draggable":true,"symbolSize":20.0,"name":"dummyService6","category":1},{"draggable":true,"symbolSize":20.0,"name":"dataSource","category":0},{"draggable":true,"symbolSize":44.721359549995796,"name":"sqlSessionFactory","category":0},{"draggable":true,"symbolSize":20.0,"name":"org.mybatis.spring.mapper.MapperScannerConfigurer#0","category":2},{"draggable":true,"symbolSize":20.0,"name":"actorMapper","category":2},{"draggable":true,"symbolSize":20.0,"name":"cityMapper","category":2},{"draggable":true,"symbolSize":20.0,"name":"countryMapper","category":2},{"draggable":true,"symbolSize":20.0,"name":"goodsMapper","category":2},{"draggable":true,"symbolSize":20.0,"name":"userMapper","category":2}],
                links: [{"lineStyle":{"color":"red"},"source":"dummyService4","target":"dummyService5"},{"source":"dummyService1","target":"dummyService5"},{"lineStyle":{"color":"red"},"source":"dummyService2","target":"dummyService1"},{"source":"userMapper","target":"dummyService1"},{"lineStyle":{"color":"red"},"source":"dummyService3","target":"dummyService1"},{"lineStyle":{"color":"red"},"source":"dummyService3","target":"dummyService2"},{"lineStyle":{"color":"red"},"source":"dummyService1","target":"dummyService2"},{"lineStyle":{"color":"red"},"source":"dummyService1","target":"dummyService3"},{"lineStyle":{"color":"red"},"source":"dummyService5","target":"dummyService4"},{"source":"dataSource","target":"sqlSessionFactory"},{"source":"sqlSessionFactory","target":"countryMapper"},{"source":"sqlSessionFactory","target":"actorMapper"},{"source":"sqlSessionFactory","target":"cityMapper"},{"source":"sqlSessionFactory","target":"goodsMapper"},{"source":"sqlSessionFactory","target":"userMapper"}]
            }
        ]
    };


    if (option && typeof option === 'object') {
        myChart.setOption(option);
    }

    window.addEventListener('resize', myChart.resize);
</script>
</body>
</html>